<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐购产品列表-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description"
        content="乐购legou.com-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,乐购" />
    <!-- 1.引入样式表  注意引入的顺序 -->
    <!-- 引入样式重置表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入头部样式 -->
    <link rel="stylesheet" href="./css/header.css">
    <!-- 引入当前样式表 -->
    <link rel="stylesheet" href="./css/proList.css">
    <!-- 引入尾部样式 -->
    <link rel="stylesheet" href="./css/footer.css">

    <!-- 引入轮播插件样式 -->
    <link rel="stylesheet" href="./css/slider.css">
</head>

<body>
    <!-- 1.头部 -->
    <div id="header">
        <!-- 顶部 -->
        <div class="top bgc10 cbf">
            <!-- 版心 -->
            <div class="container">
                <!-- 右边的内容 -->
                <div class="fr">
                    欢迎光临<span class="cf60">乐购</span>，请
                    <a href="./home.html" class="cbf">登陆</a>
                    \
                    <a href="./enroll.html" class="cf60">注册</a>
                </div>
            </div>
        </div>

        <div class="container">
            <!-- 2.banner -->
            <div id="banner" class="clearfix">
                <!-- 导航栏 -->
                <div class="container rel">
                    <!-- logo -->
                    <img src="./imgs/logo.jpg" alt="" class="logo abs">

                    <!-- 搜索框和购物车 -->
                    <div class="ptb220 clearfix">
                        <!-- 购物车 -->
                        <div class="fr shopCar tcenter font16">
                            <a href="./shopCar.html" class="car cfff font14">购物车 <span>3</span></a>
                            <a href="./payment.html" class="c80">我的订单</a>
                        </div>
                        <!-- 搜索框 -->
                        <form action="" class="fr search">
                            <input type="text" value="创意文具" class="fl ti5 c80">
                            <input type="submit" class="btn fl" value="">
                        </form>
                    </div>

                    <!-- 导航栏 -->
                    <ul class="nav font16 clearfix">
                        <li><a href="#">图书</a></li>
                        <li><a href="#">图书</a></li>
                        <li><a href="#">图书</a></li>
                        <li><a href="#">图书</a></li>
                        <li><a href="#">图书</a></li>
                        <li><a href="#">图书</a></li>
                        <li><a href="#">图书</a></li>
                        <li><a href="#">图书</a></li>
                        <li><a href="#">图书</a></li>
                        <li><a href="#">图书</a></li>
                        <li><a href="#">图书</a></li>
                    </ul>
                </div>
                <!-- banner -->
                <!-- 轮播图 -->
                <div class="bannerbox fl">

                    <!--轮播开始-->
                    <div class="pptbox" id="bannerSlider">
                        <!--轮播的内容-->
                        <ul class="innerwrapper">
                            <li>
                                <a href="#"><img src="imgs/banner1.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="imgs/banner2.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="imgs/banner3.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="imgs/banner4.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="imgs/banner5.jpg" /></a>
                            </li>
                        </ul>
                        <!--数字控制器-->
                        <ul class="controls">
                            <li class="current">1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>
                        <!--按钮控制器-->
                        <span class="btnleft"></span>
                        <span class="btnright"></span>
                    </div>
                    <!--轮播结束-->

                </div>
                <!-- 右边 -->
                <div class="rightbox fr">
                    <!-- 标题 -->
                    <h2 class="tcenter c80 fnormal font24">新书畅销榜</h2>
                    <!-- 内容 -->
                    <ul class="font14 c4d">
                        <li>
                            <span class="cf4">1</span>
                            <h4 class="hide">从你的世界路过</h4>
                            <div class="clearfix">
                                <img src="./imgs/index08_05.jpg" alt="" class="fl">
                                <p class="fr">
                                    《三体》刘慈欣
                                    一场科幻的史诗风暴
                                </p>
                            </div>
                        </li>
                        <li>
                            <span class="cf4">2</span>
                            <h4>从你的世界路过</h4>
                            <div class="clearfix hide">
                                <img src="./imgs/index08_05.jpg" alt="" class="fl">
                                <p class="fr">
                                    《三体》刘慈欣
                                    一场科幻的史诗风暴
                                </p>
                            </div>
                        </li>
                        <li>
                            <span class="cf4">3</span>
                            <h4>从你的世界路过</h4>
                            <div class="clearfix hide">
                                <img src="./imgs/index08_05.jpg" alt="" class="fl">
                                <p class="fr">
                                    《三体》刘慈欣
                                    一场科幻的史诗风暴
                                </p>
                            </div>
                        </li>
                        <li>
                            <span>4</span>
                            <h4>从你的世界路过</h4>
                            <div class="clearfix hide">
                                <img src="./imgs/index08_05.jpg" alt="" class="fl">
                                <p class="fr">
                                    《三体》刘慈欣
                                    一场科幻的史诗风暴
                                </p>
                            </div>
                        </li>
                        <li>
                            <span>5</span>
                            <h4>从你的世界路过</h4>
                            <div class="clearfix hide">
                                <img src="./imgs/index08_05.jpg" alt="" class="fl">
                                <p class="fr">
                                    《三体》刘慈欣
                                    一场科幻的史诗风暴
                                </p>
                            </div>
                        </li>
                        <li>
                            <span>6</span>
                            <h4>从你的世界路过</h4>
                            <div class="clearfix hide">
                                <img src="./imgs/index08_05.jpg" alt="" class="fl">
                                <p class="fr">
                                    《三体》刘慈欣
                                    一场科幻的史诗风暴
                                </p>
                            </div>
                        </li>
                        <li>
                            <span>7</span>
                            <h4>从你的世界路过</h4>
                            <div class="clearfix hide">
                                <img src="./imgs/index08_05.jpg" alt="" class="fl">
                                <p class="fr">
                                    《三体》刘慈欣
                                    一场科幻的史诗风暴
                                </p>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="adpic">
                <img src="./imgs/mohsou_03.jpg" alt="">
            </div>
        </div>

    </div>

    <!-- 版心 -->
    <div class="container mt45">
        <!-- 图书折扣区 -->
        <div class="zhekou borderb6 title">
            <h2 class="font22 fnormal fl cfff bgcf60 tcenter">乐购.图书折扣区</h2>
        </div>
        <div class="byban">
            <script>
                for (let i = 0; i < 10; i++) {
                    document.write(`        <div        class="baiye fl">
                <img src="./imgs/22935553-1_l.jpg" alt="" class="bookby">
                <img src="./imgs/limitTime.jpg" alt="">
                <p>白夜行  东野上吾</p>
                <div class="tjx clearfix">
                    <span class="fl">推荐</span>
                    <div class="star fl">
                        <div class="son"></div>
                    </div>
                    
                </div>
                <span class="font24 cf4">￥38</span>
                <span class="fontfe font24 c0 hide">￥58</span>
            </div>`)
                }
            </script>

        </div>
        <div class="newbook clearfix">
            <!-- 新书上架 -->
            <div class="title borderb6 clearfix nbt">
                <h2 class="font22 c3 fnormal fl"><span class="bgcf60 font24 cfff">新</span>书上架</h2>

            </div>
            <div class="dsjsd fl">


                <script>
                    for (let i = 0; i < 10; i++) {
                        document.write(
                            `<div class="dshuju fl">
                <img src="./imgs/22928335-1_l.jpg" alt="">
                <p class="font14 c3 ti8">查理 斯密斯</p>
                <p class="font14 c80 ti8">中国邮电出版社</p>
                <span class="font18 cf4">￥49</span>
                <span class="font18 c0 tde">￥79</span>
                </div>`
                        )
                    }
                </script>
            </div>
            <!-- 手风琴 -->
            <div class="rightbox1 fr">
                <!-- 标题 -->
                <h2 class="tcenter c80 fnormal font24">新书畅销榜</h2>
                <!-- 内容 -->
                <ul class="font14 c4d">
                    <li>
                        <span class="cf4">1</span>
                        <h4 class="hide">就喜欢你看不惯我 又干不</h4>
                        <div class="clearfix">
                            <img src="./imgs/index08_05.jpg" alt="" class="fl">
                            <p class="fl">
                                从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                            </p>
                        </div>
                    </li>
                    <li>
                        <span class="cf4">2</span>
                        <h4>就喜欢你看不惯我 又干不</h4>
                        <div class="clearfix hide">
                            <img src="./imgs/index08_05.jpg" alt="" class="fl">
                            <p class="fr">
                                从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                            </p>
                        </div>
                    </li>
                    <li>
                        <span class="cf4">3</span>
                        <h4>就喜欢你看不惯我 又干不</h4>
                        <div class="clearfix hide">
                            <img src="./imgs/index08_05.jpg" alt="" class="fl">
                            <p class="fr">
                                从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                            </p>
                        </div>
                    </li>
                    <li>
                        <span>4</span>
                        <h4>就喜欢你看不惯我 又干不</h4>
                        <div class="clearfix hide">
                            <img src="./imgs/index08_05.jpg" alt="" class="fl">
                            <p class="fr">
                                从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                            </p>
                        </div>
                    </li>
                    <li>
                        <span>5</span>
                        <h4>就喜欢你看不惯我 又干不</h4>
                        <div class="clearfix hide">
                            <img src="./imgs/index08_05.jpg" alt="" class="fl">
                            <p class="fr">
                                从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                            </p>
                        </div>
                    </li>
                    <li>
                        <span>6</span>
                        <h4>就喜欢你看不惯我 又干不</h4>
                        <div class="clearfix hide">
                            <img src="./imgs/index08_05.jpg" alt="" class="fl">
                            <p class="fr">
                                从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                            </p>
                        </div>
                    </li>
                    <li>
                        <span>7</span>
                        <h4>就喜欢你看不惯我 又干不</h4>
                        <div class="clearfix hide">
                            <img src="./imgs/index08_05.jpg" alt="" class="fl">
                            <p class="fr">
                                从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                            </p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 独家提供 -->
        <div id="provide">
            <!-- 标题 -->
            <div class="title borderb6 clearfix">
                <h2 class="font22 c3 fnormal fl"><span class="bgcf60 font24 cfff">独</span>家提供</h2>
                <!-- 选项卡 -->
                <ul class="fr font18 c3 tcenter">
                    <li class="active">货币金融</li>
                    <li>社会文学</li>
                    <li>社会文学</li>
                    <li>社会文学</li>
                    <li>社会文学</li>
                    <li>社会文学</li>
                    <li>社会文学</li>
                </ul>
            </div>
            <!-- 内容 -->
            <!--轮播开始-->
            <div class="pptbox" id="listSlide">
                <!--轮播的内容-->
                <ul class="innerwrapper">
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                           <div class="tcenter">
                                               <img src="./imgs/prolist01.jpg" alt="">
                                           </div>
                                           <h3 class="fnormal c3 ti5">
                                               查理 斯密斯
                                           </h3>
                                           <p class="c4d ti5">
                                               中国邮电出版社
                                           </p>
                                           <p class="cf4 ti5">
                                               &yen;49
                                               <del class="c80">&yen;79</del>
                                           </p>
                                       </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                           <div class="tcenter">
                                               <img src="./imgs/prolist01.jpg" alt="">
                                           </div>
                                           <h3 class="fnormal c3 ti5">
                                               查理 斯密斯
                                           </h3>
                                           <p class="c4d ti5">
                                               中国邮电出版社
                                           </p>
                                           <p class="cf4 ti5">
                                               &yen;49
                                               <del class="c80">&yen;79</del>
                                           </p>
                                       </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                           <div class="tcenter">
                                               <img src="./imgs/prolist01.jpg" alt="">
                                           </div>
                                           <h3 class="fnormal c3 ti5">
                                               查理 斯密斯
                                           </h3>
                                           <p class="c4d ti5">
                                               中国邮电出版社
                                           </p>
                                           <p class="cf4 ti5">
                                               &yen;49
                                               <del class="c80">&yen;79</del>
                                           </p>
                                       </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                           <div class="tcenter">
                                               <img src="./imgs/prolist01.jpg" alt="">
                                           </div>
                                           <h3 class="fnormal c3 ti5">
                                               查理 斯密斯
                                           </h3>
                                           <p class="c4d ti5">
                                               中国邮电出版社
                                           </p>
                                           <p class="cf4 ti5">
                                               &yen;49
                                               <del class="c80">&yen;79</del>
                                           </p>
                                       </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                           <div class="tcenter">
                                               <img src="./imgs/prolist01.jpg" alt="">
                                           </div>
                                           <h3 class="fnormal c3 ti5">
                                               查理 斯密斯
                                           </h3>
                                           <p class="c4d ti5">
                                               中国邮电出版社
                                           </p>
                                           <p class="cf4 ti5">
                                               &yen;49
                                               <del class="c80">&yen;79</del>
                                           </p>
                                       </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                           <div class="tcenter">
                                               <img src="./imgs/prolist01.jpg" alt="">
                                           </div>
                                           <h3 class="fnormal c3 ti5">
                                               查理 斯密斯
                                           </h3>
                                           <p class="c4d ti5">
                                               中国邮电出版社
                                           </p>
                                           <p class="cf4 ti5">
                                               &yen;49
                                               <del class="c80">&yen;79</del>
                                           </p>
                                       </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                           <div class="tcenter">
                                               <img src="./imgs/prolist01.jpg" alt="">
                                           </div>
                                           <h3 class="fnormal c3 ti5">
                                               查理 斯密斯
                                           </h3>
                                           <p class="c4d ti5">
                                               中国邮电出版社
                                           </p>
                                           <p class="cf4 ti5">
                                               &yen;49
                                               <del class="c80">&yen;79</del>
                                           </p>
                                       </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="listBox">
                            <ul class="clearfix mauto">
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`
                                        <li>
                                           <div class="tcenter">
                                               <img src="./imgs/prolist01.jpg" alt="">
                                           </div>
                                           <h3 class="fnormal c3 ti5">
                                               查理 斯密斯
                                           </h3>
                                           <p class="c4d ti5">
                                               中国邮电出版社
                                           </p>
                                           <p class="cf4 ti5">
                                               &yen;49
                                               <del class="c80">&yen;79</del>
                                           </p>
                                       </li>`)

                                    }
                                </script>
                            </ul>
                        </div>
                    </li>
                </ul>
                <!--数字控制器-->
                <ul class="controls">
                    <li class="current">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                </ul>
                <!--按钮控制器-->
                <span class="btnleft"></span>
                <span class="btnright"></span>
            </div>
            <!--轮播结束-->

        </div>

        <!-- 猜你喜欢 -->
        <div id="guess" class="mt35">
            <!-- 标题 -->
            <div class="title borderb6 clearfix">
                <h2 class="font22 c3 fnormal fl">
                    <span class="bgcf60 font24 cfff">猜</span>你喜欢
                </h2>
                <span class="fr">换一批</span>
            </div>
            <!-- 内容 -->
            <div class="content">
                <!-- 产品列表盒子 -->
                <div class="contlist">
                    <!-- 第一个子项 -->
                    <div class="listBox">
                        <ul class="clearfix mauto">
                            <script>
                                for (let i = 0; i < 12; i++) {
                                    document.write(`
                             <li>
                             <div class="tcenter">
                                 <img src="./imgs/prolist01.jpg" alt="">
                             </div>
                             <h3 class="fnormal c3 ti5">
                                 查理 斯密斯1
                             </h3>
                             <p class="c4d ti5">
                                 中国邮电出版社
                             </p>
                             <p class="cf4 ti5">
                                 &yen;49
                                 <del class="c80">&yen;79</del>
                             </p>
                         </li>`)

                                }
                            </script>
                        </ul>
                    </div>
                    <!-- 第二个子项 -->
                    <div class="listBox">
                        <ul class="clearfix mauto">
                            <script>
                                for (let i = 0; i < 12; i++) {
                                    document.write(`
                             <li>
                             <div class="tcenter">
                                 <img src="./imgs/prolist01.jpg" alt="">
                             </div>
                             <h3 class="fnormal c3 ti5">
                                 查理 斯密斯2
                             </h3>
                             <p class="c4d ti5">
                                 中国邮电出版社
                             </p>
                             <p class="cf4 ti5">
                                 &yen;49
                                 <del class="c80">&yen;79</del>
                             </p>
                         </li>`)

                                }
                            </script>
                        </ul>
                    </div>
                    <!-- 第三个子项 -->
                    <div class="listBox">
                        <ul class="clearfix mauto">
                            <script>
                                for (let i = 0; i < 12; i++) {
                                    document.write(`
                             <li>
                             <div class="tcenter">
                                 <img src="./imgs/prolist01.jpg" alt="">
                             </div>
                             <h3 class="fnormal c3 ti5">
                                 查理 斯密斯3
                             </h3>
                             <p class="c4d ti5">
                                 中国邮电出版社
                             </p>
                             <p class="cf4 ti5">
                                 &yen;49
                                 <del class="c80">&yen;79</del>
                             </p>
                         </li>`)

                                }
                            </script>
                        </ul>
                    </div>
                    <!-- 第四个子项 -->
                    <div class="listBox">
                        <ul class="clearfix mauto">
                            <script>
                                for (let i = 0; i < 12; i++) {
                                    document.write(`
                             <li>
                             <div class="tcenter">
                                 <img src="./imgs/prolist01.jpg" alt="">
                             </div>
                             <h3 class="fnormal c3 ti5">
                                 查理 斯密斯4
                             </h3>
                             <p class="c4d ti5">
                                 中国邮电出版社
                             </p>
                             <p class="cf4 ti5">
                                 &yen;49
                                 <del class="c80">&yen;79</del>
                             </p>
                         </li>`)

                                }
                            </script>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="rwsk clearfix">
           
            <script>
                for(let i=0;i<6;i++){
                   document.write(`<div class="box1 fl">
                <div class="fl">
                    <h2 class="font16">人文社科精选</h2>
                    <p class="font12">书好价优</p>
                    <span class="font14">满3件打7折</span>
                </div>
                <div class="fr picnb">
                    <img src="./imgs/22472496-1_l_2.jpg" alt="">
                </div>    
                
            </div>`)
                }
            </script>
            
        </div>
        <div>
            <img src="./imgs/mohsou_03.jpg" alt="">
        </div>
    </div>

    <!-- 页脚 -->
    <div id="footer" class="container">
        <div class="bq">
            <div>
                <img src="./imgs/222_11.png" alt="">
                <img src="./imgs/222_13.png" alt="">
                <img src="./imgs/222_15.png" alt="">
                <img src="./imgs/222_17.png" alt="">
            </div>

        </div>
        <div class="liebiao">
            <ul class="fl">
                <li class="font16">购物指南</li>
                <li>购物流程</li>
                <li>发票制度</li>
                <li>账户管理</li>
                <li>会员优惠</li>
            </ul>
            <ul class="fl">
                <li class="font16">支付方式</li>
                <li>货到付款</li>
                <li>网上支付</li>
                <li>礼品卡支付</li>
                <li>银行转帐</li>
            </ul>
            <ul class="fl">
                <li class="font16">订单服务</li>
                <li>订单配送查询</li>
                <li>订单状态说明</li>
                <li>自助取消订单</li>
                <li>自助修改订单</li>
            </ul>
            <ul class="fl">
                <li class="font16">退换货</li>
                <li>退换货政策</li>
                <li>自助申请退换货</li>
                <li>退换货进度查询</li>
                <li>退款方式和时间</li>
            </ul>
            <ul class="fl">
                <li class="font16">商家服务</li>
                <li>商家中心</li>
                <li>运营服务</li>
                <li>加入尾品汇</li>

            </ul>
            <img src="./imgs/logo_00.png" alt="">
        </div>
        <div>
            <p class="font14 c3">公司简介 | Investor Relations | 网站联盟 | 乐购招商 | 机构销售 | 手机乐购 | 官方Blog | 热词搜索</p>
            <p class="font14 c3">Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
        </div>
    </div>


    <!-- 引入juqery库 -->
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <!--引入轮播插件库-->
    <script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
    <!-- 配置插件 -->
    <script src="./js/proList.js"></script>
</body>

</html>